<template>
  <div class="app-container">
    <div class="help-content">
      <h1>帮助中心</h1>
      
      <div class="help-section">
        <h2>常见问题</h2>
        <el-collapse v-model="activeFaq">
          <el-collapse-item v-for="(faq, index) in faqs" 
            :key="index" 
            :title="faq.question" 
            :name="index">
            <div class="faq-answer">{{ faq.answer }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="help-section">
        <h2>联系我们</h2>
        <div class="contact-info">
          <p><i class="el-icon-message"></i> 邮箱：support@example.com</p>
          <p><i class="el-icon-phone"></i> 电话：400-123-4567</p>
          <p><i class="el-icon-time"></i> 工作时间：周一至周五 9:00-18:00</p>
        </div>
      </div>

      <div class="help-section">
        <h2>反馈建议</h2>
        <el-form :model="feedbackForm" :rules="feedbackRules" ref="feedbackForm">
          <el-form-item prop="title">
            <el-input v-model="feedbackForm.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item prop="content">
            <el-input type="textarea" v-model="feedbackForm.content" rows="4" placeholder="请输入反馈内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FrontHelp',
  data() {
    return {
      activeFaq: [0],
      faqs: [
        {
          question: '如何获取API Key？',
          answer: '登录后进入"我的API"页面，点击"申请API Key"按钮即可获取。'
        },
        {
          question: 'API调用次数限制是多少？',
          answer: '每个API都有不同的调用限制，具体限制可以在API详情页面查看。'
        },
        {
          question: '如何查看API调用记录？',
          answer: '在"我的API"页面中，点击对应API的"调用记录"按钮即可查看。'
        },
        {
          question: 'API调用失败怎么办？',
          answer: '请检查API Key是否正确、网络是否正常，如果问题持续，请联系技术支持。'
        }
      ],
      feedbackForm: {
        title: '',
        content: ''
      },
      feedbackRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
          { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitFeedback() {
      this.$refs.feedbackForm.validate(valid => {
        if (valid) {
          this.$message.success('反馈提交成功')
          this.feedbackForm.title = ''
          this.feedbackForm.content = ''
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .help-content {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);

    h1 {
      margin: 0 0 30px;
      font-size: 28px;
      color: #303133;
    }

    .help-section {
      margin-bottom: 40px;

      h2 {
        margin: 0 0 20px;
        font-size: 20px;
        color: #303133;
      }

      .faq-answer {
        color: #606266;
        line-height: 1.6;
      }

      .contact-info {
        p {
          margin: 0 0 15px;
          color: #606266;
          display: flex;
          align-items: center;

          i {
            margin-right: 10px;
            color: #409EFF;
          }
        }
      }
    }
  }
}
</style> 